<!-- 分类页面 -->
<template>
	<view>
		<Lines></Lines>
		<!-- #ifdef MP-WEIXIN -->
		<vInput></vInput>
		<!-- #endif -->
		<view class="list">
			<!-- 左侧滑动 -->
			<scroll-view scroll-y="true" class="list-left" :style="'height:'+clentHeight+'px;'">
				<view class="left-item" v-for="(item,index) in leftData" :key='index'>
					<view :class="index===leftIndex?'left-item-active':''" @click="changeTap(index,item.id)">{{item.name}}</view>
				</view>
			</scroll-view>
			<!-- 右侧滑动 -->
			<scroll-view scroll-y="true" class="list-right" :style="'height:'+clentHeight+'px;'">
					<view class="right-list" v-for="(item,index) in rightData">
						<block v-for="(k,i) in item" :key='i'>
							<view class="right-title" v-if="k.list.length!=0">
								{{k.name}}
							</view>
							<view class="right-content">
								<view class="right-item" v-for="(l,inx) in k.list" :key='inx' @click="goSearch(l)">
									<image class="right-image" :src="l.imgUrl"></image>
									<view class="right-name">
										{{l.name}}
									</view>
								</view>
							</view>
						</block>
					</view>
			</scroll-view>
		</view>
		<Tabbar currentPage='list'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '../../components/common/Tabbar.vue'
	import $http from '@/common/api/request.js'
	import Lines from '@/components/common/Line.vue'
	import vInput from '../../components/common/input.vue'
	export default {
		data() {
			return {
				// 初始化获取屏幕高度
				clentHeight:0,
				// 存储左侧的数据-
				leftData:[],
				// 存储右侧的数据-
				rightData:[],
				// 存储当前点击的侧边栏的index值
				leftIndex:0
			}
		},
		components:{
			Lines,
			Tabbar,
			vInput
		},
		onLoad() {
			this.init()
		},
		// 获取可视高度
		onReady(){
			uni.getSystemInfo({
				success:(res)=>{
					this.clentHeight=res.windowHeight-this.getClentHeight()
				}
			})
		},
		onNavigationBarSearchInputClicked(){
			uni.navigateTo({
				url:'../search/search'
			})
		},
		methods: {
			// 初始化数据的方法
			init(id=1){
				$http.request({
					url:'/goods/list'
				}).then((res)=>{
					// 获取左侧的数据并存储
					let leftData=[]
					let rightData=[]
					res.forEach((item)=>{
						leftData.push({
							id:item.id,
							name:item.name,
						})
						if(item.id===id){
							rightData.push(item.data)
						}
					})
					this.leftData=leftData
					// 动态获取右侧的数据并存储
					this.rightData=rightData
				}).catch(()=>{
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				})
			},
			// 侧边栏点击的方法
			changeTap(index,id){
				// 修改leftindex
				this.leftIndex=index
				// 调用init方法重新数据
				this.init(id)
			},
			// 兼容可使区域高度
			getClentHeight() {
				const res = uni.getSystemInfoSync();
				// console.log(res.platform,res.statusBarHeight)
				const system = res.platform
				if (system === 'ios') {
					return 40 + res.statusBarHeight
				} else if (system === 'android') {
					return 48 + res.statusBarHeight
				} else {
					return 0
				}
			},
			goSearch(item){
				uni.navigateTo({
					url:"../search-list/search-list?keyword="+item.name+""
				})
			}
		}
	}
</script>

<style>
.list{
	display: flex;
}
.list-left{
	width: 200rpx;
}
.list-right{
	flex: 1;
	padding-left:30rpx;
}
.left-item{
	height: 100rpx;
	background-color: #ebebeb;
	line-height: 100rpx;
	text-align: center;
	border-bottom: 2rpx solid #FFFFFF;
}
.left-item-active{
	background-color: #FFFFFF;
	border-left: 12rpx solid #00B7FF;
	font-weight: bold;
}
.right-title{
	height: 100rpx;
	line-height: 100rpx;

	font-weight: bold;
}
.right-content{
	display: flex;
	flex-wrap: wrap;
}
.right-image{
	width: 150rpx;
	height: 150rpx;
	padding: 16rpx;
}
.right-item{
	width: 150rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10rpx;
}
.right-name{
	text-align: center;
}
</style>
